<template>
    <div class="home-container">
        <Button type="primary" @click="add">添加订单</Button>
        <div class="home-content">
            <Table border :columns="columns12" :data="data6">
                <!-- <template slot-scope="{ row }" slot="name">
                    <strong>{{ row.name }}</strong>
                </template> -->
                <template slot-scope="{ row, index }" slot="action">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="show(row)">编辑</Button>
                    <Button type="error" size="small" @click="remove(row)">删除</Button>
                </template>
            </Table>
            <Modal v-model="modal1" :title="title" @on-ok="ok" @on-cancel="cancel">
                <Form ref="userInfoForm" :model="userInfoForm" label-position="left" :label-width="100">
                    <FormItem label="车辆ID">
                        <Input v-model="userInfoForm.bike_id"></Input>
                    </FormItem>
                    <FormItem label="用户">
                        <Input v-model="userInfoForm.user_id"></Input>
                    </FormItem>
                    <FormItem label="起始时间">
                        <Input v-model="userInfoForm.start_time"></Input>
                    </FormItem>
                    <FormItem label="终止时间">
                        <Input v-model="userInfoForm.end_time"></Input>
                    </FormItem>
                    <FormItem label="订单状态">
                        <Input v-model="userInfoForm.status"></Input>
                    </FormItem>
                </Form>
            </Modal>
        </div>
    </div>
</template>

<script>
import { getOrdersInfo, amendOrdersInfo, removeOrdersInfo, addOrdersInfo } from '@/api'

const defaultData = {
    user_id: '',
    bike_id: '',
    start_time: '',
    end_time: '',
    status: '',
}

export default {
    name: 'me',
    data() {
        return {
            modal1: false,
            mode: 'add',
            userInfoForm: {
                user_id: '',
                bike_id: '',
                start_time: '',
                end_time: '',
                status: '',
            },
            userInfo: '',
            columns12: [
                {
                    title: 'ID',
                    key: 'id',
                },
                {
                    title: '用户',
                    key: 'user_id',
                },
                {
                    title: '车辆ID',
                    key: 'bike_id',
                },
                {
                    title: '起始时间',
                    key: 'start_time',
                },
                {
                    title: '终止时间',
                    key: 'end_time',
                },
                {
                    title: '订单状态',
                    key: 'status',
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 150,
                    align: 'center',
                },
            ],
            data6: [],
        }
    },
    methods: {
        cancel() {
            this.userInfoForm = defaultData
        },
        ok() {
            // this.$refs['userInfoForm'].resetFields()
            // 修改数据
            if (this.mode === 'add') {
                addOrdersInfo(this.userInfoForm).then(() => {
                    this.$Message.success('添加成功!')
                    this.getInfo()
                })
            } else {
                amendOrdersInfo(this.userInfoForm.id, this.userInfoForm).then((res) => {
                    this.$Message.success('修改成功!')
                    this.getInfo()
                })
            }

            this.userInfoForm = defaultData
        },
        show(row) {
            this.mode = 'edit'
            this.userInfoForm = { ...row }
            this.modal1 = true
        },
        remove(row) {
            // this.data6.splice(index, 1)
            removeOrdersInfo(row.id).then(() => {
                this.$Message.success('删除成功')
            })
            this.getInfo()
        },
        getInfo() {
            // this.userInfoForm.ygg_userName = localStorage.getItem('userName')
            getOrdersInfo().then((res) => {
                this.data6 = res
                // this.userInfoForm = omit('ygg_pwd')(res)
            })
        },
        amendInfo() {
            console.log(this.userInfoForm)
            amendOrdersInfo(this.userInfoForm).then((res) => {
                this.$Message.success('修改成功!')
            })
        },
        add() {
            this.modal1 = true
            this.mode = 'add'
        },
    },
    mounted() {
        this.getInfo()
    },
    computed: {
        title() {
            return this.mode === 'add' ? '添加' : '编辑'
        },
    },
}
</script>

<style scoped>
.home-container {
    padding: 10px;
    padding-top: 5px;
}
.home-content {
    padding: 10px;
    border-radius: 5px;
    background: #fff;
}
</style>
